<template>
    <div class="addressView">
      <!-- 头部导航 -->
        <header>
            <van-nav-bar title="地址管理">
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" size="20" color="black" />
                </template>
            </van-nav-bar>
        </header>
      <!-- 地址列表 -->
        <main>
            <van-address-list
            v-model="chosenAddressId"
            :list="list"
            :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            />
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.addressView
    display flex
    flex-direction column
    height 100%
    overflow auto
    main
        flex 1
        padding .625rem
        background rgb(247,248,250)
        overflow auto
        .van-address-list
          height auto
        .van-address-list__bottom
            bottom .625rem
            background-color rgb(247,248,250)
</style>
<script>
import Vue from 'vue'
import { AddressList, Toast, NavBar, Icon } from 'vant'
import { getList, getDefaultAddress } from '@/api/Address'
Vue.use(AddressList)
Vue.use(Toast)
Vue.use(NavBar)
Vue.use(Icon)
export default {
  data () {
    return {
      // 设置默认选中地址
      chosenAddressId: '1',
      // 地址列表
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号'
        }
      ],
      // 禁用的地址
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号'
        }
      ]
    }
  },
  methods: {
    // 新增地址
    onAdd () {
      Toast('新增地址')
      this.$router.push('/address/stop2')
    },
    // 编辑地址
    onEdit (item, index) {
      Toast('编辑地址:' + index)
      console.log(item, index)
      this.$router.push({ name: 'addressStop2', params: { ressid: item.id } })
      // this.$router.push('/address/stop2')
    },
    // 地址数据格式处理函数
    setList (item) {
      return {
        id: item.addressid,
        name: item.name,
        tel: item.tel,
        address: item.province + item.city + item.county + item.addressDetail,
        isDefault: item.isDefault
      }
    }
  },
  mounted () {
    // 获取用户id
    this.userid = this.$store.state.userId
    this.list = []
    // 获取当前用户地址列表
    getList({ params: { userid: this.userid } }).then((res) => {
      res.data.forEach(item => {
        console.log(item.isDefault)
        if (!item.isDefault) {
          this.list.push(this.setList(item))
        }
      })
      this.chosenAddressId = this.list[0].id
    })
    // 获取默认地址
    getDefaultAddress({ userid: this.userid }).then((res) => {
      if (res.data.length) {
        this.list.unshift(this.setList(res.data[0]))
        this.chosenAddressId = res.data[0].addressid
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === 'order') {
      to.params.ressId = this.chosenAddressId
    }
    console.log(to)
    console.log(from)
    next()
  }
}
</script>
